<template>
  <div class="order">
    <!-- <div class="order-title">已下的订单</div> -->
    <div v-if="roomList.length > 0" class="all">
      <div class="order-all">
        <div class="order-desk-list" v-for="(detail,index) in roomList" :key="index">
          <div class="order-title">{{detail.name}}号桌</div>
          <div class="order-list" v-for="(goods,index) in detail.dish" :key="index">
            <div class="order-dish">
              <div class="dish-name">{{goods.dishes_name}} x{{goods.goods_number}}
                <div class="dish-spec" v-if="goods.spec != null">
                  ({{goods.spec}})
                </div>
              </div>
              
              <div class="dish-mess">
                <span class="dish-price">{{goods.amount}}</span>
              </div>
            </div>
          </div>
        </div>
        

        <div class="order-list" v-if="order.order_type == 1">
          <div class="list-left">
            <span>已付订金</span>
          </div>
          <div class="all-price">{{order.order_amount}}</div>
        </div>
        <div class="order-list">
          <div class="list-left">
            <span>总计</span>
          </div>
          <div class="all-price">
            <span>{{allPrice}}</span>
          </div>
        </div>
      </div>

      <div class="shop-nav">
        <div class="buy" @click="addFoods">
          去加菜
        </div>
        <div class="buy" @click="pay">
          结账
        </div>
      </div>
    </div>

    <!-- 订单为空 -->
    <div class="empty" v-else>
      <div class="iconfont icon-dingdan empty-icon"></div>
      <div class="empty-text">订单空空的呢，快去点餐吧～</div>
    </div>
    
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'orders',
  components: {},
  data() {
    return {
      roomList: [],
      order: '',
      allPrice: 0,
      id: 0,
      order_id: 0
    }
  },
  activated() {
    this.id = this.getUrlParmas('id')
    axios.post('api/scan_show_dish',{'id':this.id}).then( res => {
      console.log(res)
      if(res.data.code == 200) {
        this.order = res.data.order
        this.roomList = res.data.order.detail
        if(res.data.order.order_type == 3) {
           this.allPrice = Number(res.data.order.order_price)
        }else {
          if(res.data.order.order_price > res.data.order.order_amount) {
            this.allPrice = Number(res.data.order.order_price) - Number(res.data.order.order_amount)
          }else {
            this.allPrice = Number(res.data.order.order_amount)
          }
          
        }
        
      }else {
        this.roomList = []
        //this.$toast(res.data.info)
      }
    }).catch( error => {
      console.log(error)
    })
  },
  methods: {
    //我要加菜
    addFoods() {
      this.$router.push({path: '/'})
    },
    //结账
    pay() {
      //window.location.href="https://www.zltgs.com/api/scan_h5?order_id="+this.order_id+"&room_desk_id="+this.id
      this.$router.push({name: 'pay',params: {'order_id':this.order.id,'room_desk_id':this.id,'price':this.allPrice}})
    },

    //获取url参数
    getUrlParmas(name) {
      let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
      let r = window.location.search.substr(1).match(reg);
      if(r!=null)
      return unescape(r[2]);
      return null;
    }
  }
} 
</script>

<style lang="stylus" scoped>
@import "~styles/common.styl"
  .order
    background #f1f1f1
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    .order-title
      padding 0 0.3rem
      height 0.8rem
      line-height 0.8rem
      font-size 0.32rem
      background #f8f8f8
      border-bottom 0.01rem solid #dfdfdf
      text-align center
      background #3b95e3
      color #fff
    .all
      padding-bottom 75px
      background #f1f1f1
      .order-all
        overflow hidden
        .order-desk-list
          margin-bottom 30px
        .order-list
          padding 0.25rem 0.3rem
          position relative
          display flex
          justify-content space-between
          background #fff
          &::after
            content ''
            position: absolute
            height: 2px
            -webkit-transform: scale(1,.5)
            transform: scale(1,.5)
            -webkit-transform-origin: 0 bottom
            transform-origin: 0 bottom
            bottom: 0
            left 0.3rem
            right 0
            border-bottom: 1px solid #e1e1e1
          .order-dish
            width 100%
            font-size 0
            display flex
            align-items center
            justify-content space-between
            .dish-name
              display inline-block
              font-size 0.3rem
              width 3.8rem
              word-wrap:break-word
              .dish-spec
                display inline-block
                font-size 0.24rem
                color #777
                line-height: 0.36rem
                margin-top: 0.1rem
            .dish-mess
              display flex
              align-items center
              .dish-price
                display inline-block
                text-align center
                font-weight bold
                color $fontColor
                font-size 0.3rem
                &::before
                  content '¥'
                  font-size 10px
    .list-left
      padding 0.1rem 0
      font-size 0.34rem
    .all-price
      display inline-block
      text-align center
      font-weight bold
      color $fontColor
      padding 0.1rem 0
      font-size 0.34rem
      &::before
        content '¥'
        font-size 10px

    .shop-nav
      position: fixed;
      z-index: 19;
      right: 15px;
      bottom: 15px;
      left: 15px;
      height: 0.8rem;
      display flex
      justify-content space-between
      .buy
        min-width 2.5rem
        height 0.8rem
        background rgba(32,29,26,.82)
        border-radius 0.4rem
        color #fff;
        line-height 0.8rem
        font-size 0.3rem
        position relative
        text-align center
    .empty
      margin-top 100px
      color #999
      text-align center
      .empty-icon
        font-size 100px
        color #bbb
      .empty-text
        font-size 16px
        margin-top 20px
</style>